<template>
  <div class="container">

    编号：{{ num }} <span> </span>
    <button @click="updateNum">修改编号</button>
    <br />
    姓名：{{ person.name }} <span> </span>
    <button @click="updateName">修改姓名：</button>
    <br />
    年龄：{{ person.age }} <span> </span>
    <button @click="updateAge">修改年龄</button>
  
    <hr>
    旧车：{{ car }}
  <br>
    新车：{{ newCar }}
  </div>
  <button @click="updateCar">修改汽车数据</button>

</template>


<script lang="ts" setup name="App">
import { markRaw, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw } from 'vue';

let num = ref(1);

let person = reactive({
  name: '张三', age: 20
})
//不是响应式数据，将person转换成非响应式数据：person2
let person2 = toRaw(person)
//markRaw标记数据为非响应数据
let car = markRaw({
  id:1
})
//被markRaw标记的无法变成响应式数据
let newCar = reactive(car);

function updateCar() {
  newCar.id +=1;
}





function updateNum() {
  num.value += 1;
}

function updateName() {
  person2.name = 'toy'
  console.log(person,person2);
}
function updateAge() {
  person2.age += 1;
  console.log(person,person2);
  
}



</script>



<style scoped></style>
